<template>
    <div class="lyx-grid">
        <el-dialog title="网格内详情" :visible.sync="modelShow" :before-close="handleClose" width="50%">
            <el-row class="text-center">
                <el-radio-group v-model="activeName2" size="mini">
                    <el-radio-button label="info">详细信息</el-radio-button>
                    <el-radio-button label="question">问题线索</el-radio-button>
                    <el-radio-button label="user">网格员</el-radio-button>
                    <el-radio-button label="company">企业单位</el-radio-button>
                </el-radio-group>
            </el-row>

            <el-container>
                <el-main style="padding:10px;">
                    <info v-if="activeName2 == 'info'"
                          :gridid="current.id"
                          v-on:getpoint="getpoint"
                    ></info>

                    <question v-if="activeName2 == 'question'"
                              :gridid="current.id"
                              v-on:getpoint="getpoint"
                    ></question>

                    <user v-if="activeName2 == 'user'"
                          :gridid="current.id"
                          v-on:getpoint="getpoint"
                    ></user>

                    <company v-if="activeName2 == 'company'"
                             :gridid="current.id"
                             v-on:getpoint="getpoint"
                    ></company>
                </el-main>
            </el-container>
        </el-dialog>
    </div>
</template>

<script>
	import Vue from 'vue'
	import Vue2OrgTree from 'vue2-org-tree'

	import question from './question'
	import user from './user'
	import company from './company'
	import info from './info'

	export default {

		name: 'grid111',

		data () {
			return {
				props: {
					label: 'company_name',
					children: 'children'
				},
				data: {},
				visbile: true,
				current: {},
				horizontal: false,
				collapsable: true,
				expandAll: true,
				labelClassName: 'bg-white',
				offsetheight: (document.documentElement.clientHeight - 220) * 0.5,
				activeName2: 'info',
				modelShow: false
			}
		},

		props: {
			grideData: {},
            show: false,
		},

		components: {
			Vue2OrgTree,
			question,
			user,
			company,
			info,
		},

		computed: {},

		methods: {
			init () {
				this.$http({
					fun: 'overviewList',
					cb: res => {
						const result = this.$util.transData(res, 'id', 'parent_id', 'children');
						this.data = result[0];
					}
				});
			},

			renderContent (h, data) {
				return data.company_name;// + (data.name ? data.name : '');
			},

			onExpand (data) {
				if ('expand' in data) {
					data.expand = !data.expand
					if (!data.expand && data.children) {
						this.collapse(data.children)
					}
				} else {
					this.$set(data, 'expand', true)
				}
			},

			onNodeClick (e, data) {
				console.log('onNodeClick');
				console.log(data);
				this.$emit('showgrid', data);
				console.log(data, 'onNodeClick')
				this.current = data;
			},
			handleClose () {
				this.modelShow = false
                this.$emit('close',false)
			},
			collapse (list) {
				var _this = this
				list.forEach(function (child) {
					if (child.expand) {
						child.expand = false
					}
					child.children && _this.collapse(child.children)
				})
			},

			expandChange () {
				this.toggleExpand(this.data, this.expandAll)
			},

			toggleExpand (data, val) {
				var _this = this
				if (Array.isArray(data)) {
					data.forEach(function (item) {
						_this.$set(item, 'expand', val)
						if (item.children) {
							_this.toggleExpand(item.children, val)
						}
					})
				} else {
					this.$set(data, 'expand', val)
					if (data.children) {
						_this.toggleExpand(data.children, val)
					}
				}
			},

			getpoint (item) {
				console.log(item);
				this.$emit('getpoint', item);
			},

		},

		watch: {
           show (e) {
				this.current = this.grideData
				this.modelShow = true
			}
		},

		mounted () {
			this.init();
		},

	}
</script>

<style scoped>
.lyx-grid >>>.el-dialog__body{
    min-height: 400px;
}
</style>
